<template>
  <div class="search_wrapper px1200">
    <div class="input_wrapper">
      <input
        v-model="key"
        type="text"
        name="keyword"
        class="keyword"
        onblur="if(!value){value=defaultValue;this.style.color='#999'}"
        onclick="if (value==='创业项目关键字'){value='';this.style.color='#999';}"
        :onmouseover="mouseover"
        autocomplete="off"
        style="color: rgb(153, 153, 153);"
      >
      <input type="submit" class="submit" value="搜索" @click="search">
    </div>

    <p class="search_hot">
      热门搜索：
      <a href="#" @click="handleKeywordClicked('蜜雪冰城')">
        蜜雪冰城
      </a>
      <a href="#" @click="handleKeywordClicked('品牌加盟')">
        品牌加盟
      </a>
      <a href="#" @click="handleKeywordClicked('推广合作')">
        推广合作
      </a>
      <a href="#" @click="handleKeywordClicked('旺铺招租')">
        旺铺招租
      </a>
      <a href="#" @click="handleKeywordClicked('网站建设')">
        网站建设
      </a>
      <a href="#" @click="handleKeywordClicked('平面设计')">
        平面设计
      </a>
    </p>
  </div>
</template>
<script>
// import { mapState, mapMutation } from 'vuex'
// import Api from '~/api'
export default {
  name: 'SearchContent',
  // computed: {
  //   key: {
  //     get () {
  //       return this.$store.state.search.q || '创业项目关键字'
  //     },
  //     set (val) {
  //       this.$store.commit('setSearch', { q: val })
  //     }
  //   }
  // },
  data () {
    return {
      key: this.$store.state.searchKeyword || '创业项目关键字'
    }
  },
  methods: {
    mouseover () {

    },
    handleKeywordClicked (value) {
      this.$store.commit('setSearchKeyword', value)
    },
    search () {
      this.$store.commit('setSearchKeyword', this.key)
    }
  }
}
</script>
<style lang="scss" scoped>
.search_wrapper{
background-color: #FFFFFF;
}
.search{
  height: 36px;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.input_wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.keyword {
  height: 40px;
  line-height: 40px;
  padding-left: 42px;
  width: 400px;
  border: 2px solid #f14242;
  border-right: none;
  color: #c4c4c4;
  font-size: 13px;
  background: url(~/assets/search/ico6.png) no-repeat 12px center;
  font-family: 'Microsoft Yahei',sans-serif;
  box-sizing: border-box;
}

.submit {
  border: none;
  background: #F14242;
  color: #fff;
  width: 93px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  font-size: 15px;
  font-family: 'Microsoft Yahei',sans-serif;
}

.search_hot {
  font-size: 12px;
  color: #666;
  font-family: 'Microsoft Yahei',sans-serif;
  display: block;
  margin-top:5px;
  text-align: center;
}

.search_hot a {
  color: #a3a3a3;
  margin-left: 20px;
  text-decoration: none;
}
</style>
